<template>
	<s-layout title="绑定店铺" v-if="state.data">
		<view class="store ss-p-30 ss-flex justify-between align-center">
			<image class="store-image" :src="state.data.thumb" mode="aspectFill"></image>
			<view class="store-text ss-flex justify-between align-start flex-column">
				<view class="name ss-line-1">{{state.data.name}}</view>
				<view class="address ss-line-1">地址:{{state.data.address}}</view>
			</view>
		</view>
		<view class="btn" @click="bind">绑定店铺</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';

	const state = reactive({
		id: '',
		code: '',
		data: null
	})


	onLoad((options) => {
		if (options) {
			state.id = options.id
			state.code = options.code
			getData()
		}
	})

	const getData = async () => {
		const {
			error,
			data
		} = await sheep.$api.merchant.storeInfo({
			store_id: state.id,
			code: state.code
		})

		if (error === 0) {
			state.data = data
		}
	}

	const bind = async () => {
		const {
			error,
			data
		} = await sheep.$api.merchant.bindStore({
			store_id: state.id,
			code: state.code
		})

		if (error === 0) {
			uni.showModal({
				title: '提示',
				content: '绑定成功！',
				confirmText: '返回首页',
				success: function(res) {
					if (res.confirm) {
						sheep.$router.go('/pages/index/home')
					}
				}
			});
		}
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.store {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx auto 0;

		.store-image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.store-text {
			flex: 1;
			height: 140rpx;

			.name {
				width: 100%;
				font-weight: 500;
				font-size: 32rpx;
				color: #343434;
			}

			.address {
				width: 100%;
				font-weight: 400;
				font-size: 24rpx;
				color: #9A9A9A;
			}
		}
	}

	.btn {
		width: 702rpx;
		height: 80rpx;
		background: #35C7A8;
		border-radius: 40rpx;
		margin: 80rpx auto 0;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
</style>